<template>
	<view class="content" :class="id?'active':''">
		<view class="list">
			<view class="items" v-for="(item,i) in dataJson.detail" :key="i">
				<view class="l">
					<view class="h3" :class="item.type==1?'':'active'">
						{{item.type==1?'待消费':'待还款'}}
					</view>
					<view class="p">
						¥{{item.amount}}
					</view>
				</view>
				<view class="r">
					{{item.run_time}}
				</view>
			</view>
		</view>
		<view class="btn" @click="doneBtn">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataJson: {},
				id: '',
			}
		},
		onLoad(option) {
			this.dataJson = JSON.parse(option.deCode)
			if (option.id) {
				this.id = option.id
			}
			// this.list = JSON.parse(option.deCode.detail)
		},
		methods: {
			doneBtn() {
				this.$u.api.planMakeCon({
					plan_id: this.id
				}).then(res => {
					console.log(res)
					uni.showToast({
						icon: 'none',
						title: '确认成功'
					})
					uni.navigateTo({
						url: "/pages/creditcard/autoPayMoney/list"
					})
				})
			}

		}
	}
</script>
<style>
	page {
		background-color: #f4f5f7;
	}
</style>
<style scoped lang="scss">
	.content.active {
		padding-bottom: 154rpx;

		.btn {
			display: block;
		}
	}

	.items {
		background-color: #fff;
		margin: 20rpx 0;
		display: flex;
		padding: 15rpx 30rpx;
		align-items: center;
		justify-content: space-between;

		.l {
			font-size: 28rpx;

			.h3 {
				color: #e84e58;
				margin-bottom: 5rpx;
			}

			.h3.active {
				color: #69a862;
			}

			.p {
				color: #4292f3;
				font-weight: bold;
			}
		}

		.r {
			color: #9e9e9e;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.btn {
		width: 690rpx;
		height: 94rpx;
		color: #fff;
		font-size: 36rpx;
		display: none;
		text-align: center;
		line-height: 94rpx;
		border-radius: 10rpx;
		background-color: #ec6a38;
		;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
	}
</style>
